<template>
  <div id="imglist" v-on:click="hiddenMessage">
    <HeaderBar ref="header"></HeaderBar>
    <ListLeft ref="listsleft" ></ListLeft>
    <div class="img-list-container">
      <h3>默认分组</h3>
      <div class="img-items">
          <div v-on:click.stop="newModelShow" class="img-item img-item-add">
            <img :src="addUrl">
            <span>新建大屏</span>
          </div>
          <div v-for="item in modules" v-on:click.stop="turnToEditor(item.id)" class="img-item">
            <div class="img-item-img" :style="item.style">
            </div>
            <div class="img-item-manage">
              <div>{{item.title}}</div>
              <img v-on:click.stop="delModuleShow(item.id)" :src="delUrl">
            </div>
          </div>
      </div>
      <!-- img-items_end -->
    </div>
    <NewGroup ref="newgroup" :style="newstyle"></NewGroup>
    <div class="groupmenu":style="groupstyle">
      <ul class="group-edit" :style="editgroupstyle">
        <li v-on:click.stop="editShow">修改名称</li>
        <li v-on:click.stop="delShow">删除</li>
      </ul> 
    </div>
    <!-- groupmenu_end -->
    <div class="message-confirm" :style="confirmstyle">
        <div class="message-container">
          <h3>删除分组</h3>
          <p>确定要删除吗？删除以后无法恢复！</p>
          <div class="confirm">
            <span v-on:click="delMenu">确定</span>
            <span v-on:click="cancelDel">取消</span>
          </div>
        </div>
    </div>
    <!-- groupmenu_end -->
    <div class="message-confirm" :style="delmoduleconfirmstyle">
        <div class="message-container">
          <h3>删除大屏</h3>
          <p>确定要删除吗？删除以后无法恢复！</p>
          <div class="confirm">
            <span v-on:click="delModules">确定</span>
            <span v-on:click="cancelDelModule">取消</span>
          </div>
        </div>
    </div>
    <EditGroup ref="editgroup" :style="editstyle"></EditGroup>
    <NewModule ref="newmodule" :style="newmodelstyle"></NewModule>
  </div>
</template>
<script>
  import HeaderBar from '@/components/header/head-bar.vue'
  import ListLeft from '@/components/imgmodules/components/imglist/list-left.vue'
  import NewGroup from '@/components/imgmodules/components/imglist/list-new.vue'
  import EditGroup from '@/components/imgmodules/components/imglist/list-edit.vue'
  import NewModule from '@/components/imgmodules/components/modulelist/module-new.vue'
  import "./less/img-list.less"
  import { mapActions } from 'vuex'
  export default {
    name: 'imglist',
    components: {
      HeaderBar,ListLeft,NewGroup,EditGroup,NewModule
    },
    data () {
      return {
        addUrl: require('@/assets/imgs/10.png'),
        delUrl:require('@/assets/imgs/11.png'),
        delmoduleid:"",
        newstyle:{
          display:"none"
        },
        delmoduleconfirmstyle:{
          display:"none"
        },
        modules:[],
        editstyle:{
          display:"none"
        },
        newmodelstyle:{
          display:"none"
        },
        confirmstyle:{
          display:"none"
        },
        currentmenuid:"",
        currentmenutitle:"",
        groupstyle:{
          display:"none"
        },
        editgroupstyle:{
          left:"0px",
          top:"0px"
        }
      }
    },
    methods:{
      ...mapActions([
          'delGroup',
          'getModuleList',
          'delModule'
      ]),
      // 删除大屏
      delModules(){
        this.delmoduleconfirmstyle.display="none";
        let params = {
          id:this.delmoduleid
        }
        this.delModule({params}).then(function(res){
          this.confirmstyle.display="none";
            if (res.code=="1") {
              this.moduleList(this.currentmenuid);
            }else{
              this.$Message.warning(res.message);
            }
         }.bind(this))
      },
      // 取消删除大屏
      cancelDelModule(){
        this.delmoduleconfirmstyle.display="none";
      },
      // 删除大屏确认
      delModuleShow(id){
        this.delmoduleid=id;
        this.delmoduleconfirmstyle.display="";
      },
      turnToEditor(id){
        this.$router.push({ 
          path: 'imgeditor', 
          query: { 
            id: id
          }
        })
      },
      groupidChange(id){
        this.currentmenuid = id;
        this.moduleList(id);
      },
      cancelDel(){
        this.groupstyle.display="none";
        this.confirmstyle.display="none";
      },
      cancelEdit(){
        this.editstyle.display="none";
      },
      editShow(){
        this.editstyle.display="";
      },
      delShow(){
        this.confirmstyle.display="";
      },
      hiddenModuleNew(){
        this.newmodelstyle.display="none";
      },
      newModelShow(){
        if (this.$refs.listsleft.menus.length<=0) {
          this.$Message.warning("请先新建分组");
          return;
        }
        this.newmodelstyle.display="";
        this.$refs.newmodule.getModelList();
      },
      // 删除分组
      delMenu(){
          const params={
            id:this.currentmenuid
          }
         this.delGroup({params}).then(function(res){
          this.confirmstyle.display="none";
            if (res.code=="1") {
              this.getGroupList();
            }else{
              this.$Message.warning(res.message);
            }
         }.bind(this))
      },
      hiddenNewGroup(){
        this.newstyle.display="none"
      },
      hiddenEditGroup(){
        this.editstyle.display="none"
      },
      showNewGroup(){
        //设置名称为空
        this.$refs.newgroup.reVal();
        this.newstyle.display="";
      },
      hiddenMessage(){
        this.groupstyle.display="none";
        this.$refs.header.hiddenUserMessage();
      },
      getGroupList(){
        this.groupstyle.display="none";
        this.editstyle.display="none";
        this.newstyle.display="none";
        this.$refs.listsleft.getGroupLists();
      },
      moduleList(groupid){
        var params = {
          groupid:groupid
        }
        this.getModuleList({
          params
        }).then(function(res){
          if (res.code=="1") {
            var  models = res.data;
            for (let i = 0; i < models.length; i++) {
              models[i].style={
                "background-image":"url("+ models[i].headimg+"?imageView2/1/w/250/h/141)"
              }
            }
            this.modules = models;
          }else{
            this.$Message.info(res.message)
          }
        }.bind(this))
      },
      setCurrentMenuId(id){
        this.currentmenuid = id;
      },
      setCurrentMenuTitle(title){
        this.currentmenutitle = title;
      },
      showGroupMenu(Ce,id,title){
        this.setCurrentMenuId(id);
        this.setCurrentMenuTitle(title);
        this.$refs.editgroup.setTitle(id,title);
        this.editgroupstyle.left=Ce.clientX+'px';
        this.editgroupstyle.top=Ce.clientY+'px';
        this.groupstyle.display="";
      }
    }
  }
</script>
<style scoped>

</style>
